import React, { Component, Fragment } from "react"
import "./style.css"
import XiaoItem from "./XiaoItem"
import axios from "axios"
import { CSSTransition, TransitionGroup } from "react-transition-group"

export default class Xiao extends Component {
  //js的构造函数，由于其他任何函数执行
  constructor(props) {
    super(props) //调用父类的构造函数，固定写法
    this.inputChange = this.inputChange.bind(this)
    this.addList = this.addList.bind(this)
    this.deleteItem = this.deleteItem.bind(this)
    this.state = {
      inputValue: "", // input中的值
      list: ["基础按摩", "精油推背", "老汉推车", "宝贝推荐"] //服务列表
    }
  }
  componentDidMount() {
    // console.log("componentDidMount----组件挂载完成的时刻执行")
    axios
      .get("https://apiblog.jspang.com/default/getAllPartCount")
      .then(res => {})
      .catch(err => console.log("%cXiao.js line:22 err", "color: #007acc;", err))
  }
  // shouldComponentUpdate() {
  //   console.log("shouldComponentUpdate---组件发生改变前执行")
  //   return true
  // }
  // componentDidUpdate() {
  //   console.log("componentDidUpdate----组件更新之后执行")
  // }
  // shouldComponentUpdate() {
  //   return false
  // }
  inputChange() {
    this.setState({
      inputValue: this.input.value
    })
  }
  addList() {
    this.setState(
      {
        list: this.state.list.concat(this.state.inputValue),
        inputValue: ""
      },
      () => {
        console.log("%cXiao.js line:27 this.ul", "color: #007acc;", this.ul.querySelectorAll("li").length)
      }
    )
  }
  deleteItem(index) {
    console.log("%cXiao.js line:23 index", "color: #007acc;", index)
    let list = this.state.list
    list.splice(index, 1)
    this.setState({
      list
    })
  }
  render() {
    return (
      <Fragment>
        <div>
          <label htmlFor="jss">加入服务：</label>
          <input
            id="jss"
            className="abc"
            value={this.state.inputValue}
            onChange={this.inputChange}
            ref={input => {
              this.input = input
            }}
          />
          <button onClick={this.addList}> 增加服务 </button>
        </div>
        <ul ref={ul => (this.ul = ul)}>
          <TransitionGroup>
            {this.state.list.map((item, index) => {
              return (
                <CSSTransition timeout={1000} classNames="boss-text" unmountOnExit appear={true} key={item + index}>
                  <XiaoItem content={item} index={index} deleteItem={this.deleteItem} avname="你好" />
                </CSSTransition>
              )
            })}
          </TransitionGroup>
        </ul>
      </Fragment>
    )
  }
}
